<template>
  <view class="cont">
    <div class="img">
      <image :src="this.$store.state.imgBaseUrl + '/pay_fail.png'"></image>
    </div>
    <view class="text1">支付失败</view>
    <view class="text2">
      您以当前取消了支付或网络问题不稳定导致付款失败，
    </view>
    <view class="text2">
      请重新发起支付或上传您的付款凭证。
    </view>
    <view class="footer">
      <!-- 身份和资质认证完成后展示 -->
      <button type="primary" class="sub-btn yellow miniBtn" plain="true" @click="gotoPage">上传凭证</button>
      <button type="primary" class="miniBtn block" plain="true" @click="topPay">线上支付</button>
    </view>
    <view>
      <uni-fab
        :pattern="pattern"
        :content="content"
        :horizontal="horizontal"
        :direction="direction"
        @trigger="trigger"
      ></uni-fab>
    </view>
  </view>
</template>
<script>
import { payAgain } from "@/service/join/join.service.js"
import uniFab from '@/components/uni-fab/uni-fab.vue';
import { logoutApi } from '@/service/user/user.service.js'
export default {
  components: {uniFab},
  data() {
    return {
      type: '', // 加盟类型
      allInfo: null,
      horizontal: 'right',
      direction: 'horizontal',
      pattern: {
        color: '#FFFFFF',
        backgroundColor: 'rgba(0,0,0,0.5)',
        selectedColor: '#007AFF',
        buttonColor:"#434343"
      },
      content: [
        {
          iconPath: '../../static/image/icon/loginout.png', // 图片路径
          text: '安全退出',
          active: false
        }
      ]
    };
  },
  onLoad(option) {
    this.type = option.type
  },
  onShow() {
    const datas = uni.getStorageSync('recomposeDatas');
    if (datas) {
      this.allInfo = datas;
    }
  },
  methods: {
    trigger(e) {
      if (e.index == 0) { // 购物车
        logoutApi({}, res => {
          if (res.status == 0) {
            uni.showToast({
              title: '登出成功！',
              success: () => {
                setTimeout(function () {
                  uni.clearStorageSync();
                  
                }, 2000);
              }
            })
          }
        }, null, {showErrorMsg: true});
      }
    },
    gotoPage () {
      uni.navigateTo({
        url: '/pages/join/updateCertificate?type=' + this.type + '&from=pay'
      })
    },
    topPay () {
      // 支付失败后的上传
      let datas = {
        id: this.allInfo.joinId,
        onlinePay: 1
      }
      payAgain(datas, res => {
        if (res.status == 0) {
          uni.showToast({
            title: '提交成功',
            icon: 'none'
          });
          uni.removeStorage({ // 清楚缓存
            key: 'recomposeDatas',
            success: function () {
              // 打开支付
              location.href = res.data.onlinePayUrl;
            }
          });
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      })
    }
  }
}
</script>

<style lang="scss">
.cont {
  height: 100vh;
  background-color: #FFFFFF;
  .img {
    width: 306rpx;
    height: 306rpx;
    padding-top: 167rpx;
    margin: 0 auto;
    image {
     width: 306rpx;
     height: 306rpx;
    }
  }
  .text1 {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(67,67,67,1);
    text-align: center;
    margin-bottom: 60rpx;
    margin-top: 35rpx;
  }
  .text2 {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(153,153,153,1);
    text-align: center;
    line-height: 49rpx;
  }
  .footer {
    width: 100%;
    border-top: 1px solid #E1E1E1;
    padding: 14rpx 0 20rpx;
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 0;
    left: 0;
    button {
      height: 70rpx;
      margin: 0 32rpx;
      line-height: 70rpx;
      font-size: 30rpx;
      border: none;
      &.sub-btn {
        width: 100%;
      }
      &.miniBtn {
        width: 320rpx;
      }
      &.yellow {
        color: #434343;
        background-color: #F6DA99;
      }
      &.block {
        background-color: #434343;
        color: #F6DA99;
      }
    }
  }
}
</style>
